<template>
	<view class="order-list" :class="themeName">
		<!-- Tabs -->
		<navbar title="服务订单"></navbar>
		<u-tabs :list="tabsList" :is-scroll="false" :height="80" :active-color="themeColor" :bar-style="{ top: '100%' }" :current="tabsIndex" @change="changeCurrentTab" />

		<view class="order-item">
			<mescroll-uni
				ref="mescrollRef"
				:fixed="false"
				:up="{
					auto: false,
					noMoreSize: 4,
					empty: {
						icon: '/static/images/empty/order.png',
						tip: '暂无订单~',
						fixed: true
					}
				}"
				:down="{ auto: false }"
				@init="mescrollInit"
				@down="downCallback"
				@up="upCallback"
			>
				<block>
					<view class="order-contain">
						<view class="order" v-for="(item,index) in lists" :key="index" @tap.stop="detail(item.id)">
							<!-- Order Header -->
							<view class="order-header">
								<view class="order-sn">订单编号:{{item.sn}}</view>
								<view :class="['order-status','order-status--primary']">
									<view v-if="item.order_status == 0">待付款</view>
									<view v-else-if="item.order_status == 1">待服务</view>
									<view v-else-if="item.order_status == 2">服务中</view>
									<view v-else-if="item.order_status == 3">已完成</view>
								</view>
							</view>
							<view class="order-main flex">
								<image style="width: 180rpx;height: 180rpx;" :src="item.image" mode=""></image>
								<view class="m-l-20">
									<view class="black md line-2" style="height: 80rpx;">{{item.title}}</view>
									<view class="muted md">服务时长：{{item.total_num}}分钟</view>
									<view class="lg " style="color: #E0A356;">￥{{item.total_amount}}</view>
								</view>
							</view>
							<!-- Order Footer -->
							<view class="order-footer">
								<view v-if="item.order_status === 0" class="order-button order-button--muted" @tap.stop="del(item.id)">删除订单</view>
								<view v-if="item.order_status == 0" class="order-button order-button--primary" @tap.stop="pay(item.id,item.total_num)">立即支付</view>
								<view v-if="item.order_status == 1" class="order-button order-button--primary" @tap.stop="gpto(item,1)">去使用</view>
								<view v-if="item.order_status == 2" class="order-button order-button--primary" @tap.stop="gpto(item,2)">去操控</view>
								<view v-else-if="item.order_status == 3 && item.pl == 0" class="order-button order-button--primary" @tap.stop="speck(item.id)">
									<text>去评价</text>
									<text class="song">评价得2积分</text>
								</view>
								<view v-else-if="item.order_status == 3 && item.pl > 0" class="order-button order-button--muted">已完成</view>
							</view>
						</view>
					</view>
				</block>
			</mescroll-uni>
		</view>
	</view>
</template>

<script>
import { fwOrderList,prepay,orderDel } from '@/api/others.js';
import OrderMixin from '@/mixins/order';
import { PaymentStatusEnum } from '@/utils/enum';
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins';
export default {
	name: 'OrderList',
	mixins: [OrderMixin, MescrollMixin],
	data() {
		return {
			// Tabs列表
			tabsList: [
				{
					sign: '',
					name: '全部',
				},
				{
					sign: 0,
					name: '待付款'
				},{
					sign: 1,
					name: '待服务'
				},
				{
					sign: 2,
					name: '服务中'
				},
				{
					sign: 3,
					name: '已完成'
				}
			],
			tabsIndex: '', // Tabs索引
			status:'',
			lists: [
				// {id:1,order_status:0},
				// {id:2,order_status:1},
				// {id:3,order_status:2}
			]
		};
	},
	methods: {
		// 删除
		del(id){
			orderDel({id:id}).then((res) => {
				this.$toast({
					title: '操作成功'
				})
				this.refreshOrderData();
			})
		},
		// 支付
		pay(id,time){
			let params = {
				order_id:id,
				pay_way:2,
				from:'order2'
			}
			uni.showLoading();
			prepay(params).then((ret) => {
				uni.hideLoading();
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: ret.config.timeStamp, // 时间戳（单位：秒）
					nonceStr: ret.config.nonceStr, // 随机字符串
					package: ret.config.package, // 固定值
					signType: ret.config.signType, // 签名算法，这里用的 MD5/RSA 签名
					paySign: ret.config.paySign, //签名
					success(res) {
						uni.showToast({
							title: '支付成功',
							duration: 2000
						});
						setTimeout(function () {
							uni.reLaunch({
								url: '/others/pages/getopen/getopen?id='+id+'&UUID='+ret.uuid+'&deviceId='+ret.deviceid
								+'&chargeId='+ret.charge_id+'&minute='+time
							});
						}, 1500);
					},
					fail(e) {
						uni.showToast({
							title: '支付失败',
							icon: 'none'
						});
					}
				});
			});
		},
		// 去使用
		// gpto(item){
		// 	// console.log(item)
		// 	uni.setStorageSync('jqrdevicename',item.jiqiren.sn)
		// 	uni.reLaunch({
		// 		url: '/others/pages/getopen/getopen?id='+item.id+'&UUID='+item.jiqiren.uuid+'&deviceId='+item.jiqiren.deviceid
		// 		+'&chargeId='+item.sn2+'&minute='+item.total_num
		// 	});	
		// },
		// 去操控
		gpto(item,type){
			uni.setStorageSync('jqrdevicename',item.jiqiren.sn)
			
			if(item.jiqiren.line==1 && item.jiqiren.wifisn){
				uni.navigateTo({
					url:'/others/pages/control/control_wxw?id='+item.id+'&type='+type+'&time='+item.total_num
				})
			}else{
				uni.navigateTo({
					url:'/others/pages/control/control?id='+item.id+'&type='+type+'&time='+item.total_num
				})
			}
			
		},
		// 评价
		speck(id){
			uni.navigateTo({
				url:'/others/pages/order_speck/order_speck?id='+id
			})
		},
		// 详情
		detail(id){
			uni.navigateTo({
				url:'/others/pages/order_detail/order_detail?id='+id
			})
		},
		// 更改当前Tab页
		changeCurrentTab(index) {
			this.tabsIndex = index;
			this.status = this.tabsList[index].sign;
			this.refreshOrderData();
		},

		// 刷新订单数据 @Mixins【/src/mixins/order.js】内调用，请勿删除
		refreshOrderData() {
			this.$nextTick(() => {
				this.mescroll.resetUpScroll();
			});
		},

		// 上拉加载更多
		upCallback({ num, size }) {
			let params = {
				status: this.status,
				page_no: num,
				page_size: size
			}
			fwOrderList(params).then((res) => {
					if (num == 1) this.lists = []; //如果是第一页需手动置空列表
					this.lists = this.lists.concat(res.lists); //追加新数据
					this.mescroll.endSuccess(res.lists.length, res.count);
				})
				.catch((err) => {
					this.mescroll.endErr()
				});
		}
	},

	onLoad() {
		const options = this.$Route.query;
		// console.log(options.mode)
		if(options.mode == 'all'){
			this.status = '';
			this.tabsIndex = 0;
		}else if(options.mode == 'pay'){
			this.status = 0;
			this.tabsIndex = 1;
		}else if(options.mode == 'delivery'){
			this.status = 2;
			this.tabsIndex = 3;
		}else if(options.mode == 'finish'){
			this.status = 3;
			this.tabsIndex = 4;
		}
	},
	onShow() {
		this.refreshOrderData();
	}
};
</script>

<style lang="scss">
page {
	height: 100%;
	padding: 0;
}
.order-list {
	height: 100%;
	display: flex;
	flex-direction: column;
	.order-item {
		flex: 1;
		min-height: 0;
	}
}
.order-contain {
	padding: 0 20rpx;
}

.order {
	padding-left: 20rpx;
	margin-top: 20rpx;
	border-radius: 5px;
	background-color: #ffffff;

	&-header {
		display: flex;
		height: 80rpx;
		align-items: center;
		padding-right: 20rpx;
		border-bottom: $-solid-border;

		.order-tag {
			padding: 4rpx 10rpx;
			margin-right: 10rpx;
			border-radius: 2px;
			font-size: $-font-size-xxs;
			color: #ffffff;

			&--pink {
				background: linear-gradient(#ff369a 0%, #ff2c3c 100%);
			}

			&--red {
				background: linear-gradient(#f95f2f 0%, #ff2c3c 100%);
			}

			&--blue {
				background: linear-gradient(#fa6aa9 0%, #fc00bb 100%);
			}

			&--green {
				background: linear-gradient(#0cc21e 0%, #06c160 100%);
			}
		}

		.order-sn {
			font-size: $-font-size-nr;
		}

		.order-status {
			margin-left: auto;
			font-size: $-font-size-sm;

			&--primary {
				@include font_color();
			}

			&--muted {
				color: $-color-muted;
			}
		}
	}

	&-main {
		padding: 20rpx 0;
		
	}

	&-footer {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		height: 130rpx;
		padding-right: 20rpx;
		border-top: $-solid-border;

		.order-button {
			box-sizing: border-box;
			padding: 10rpx 30rpx;
			border-radius: 60px;
			font-size: $-font-size-nr;
			position: relative;

			&:nth-child(n + 2) {
				margin-left: 20rpx;
			}

			&--primary {
				@include background_color() color: #ffffff;
			}

			&--normal {
				border-width: 1px;
				border-style: solid;
				@include border_color() @include font_color();
			}

			&--muted {
				border: $-solid-border;
				color: $-color-lighter;
			}
			
			.song{
				position: absolute;
				font-size: 18rpx;
				top: -20rpx;
				right: -10rpx;
				background-color: #02A7FD;
				padding: 15rpx;
				border-radius: 25rpx;
				line-height: 10rpx;
			}
		}
	}
}
</style>
